<route lang="json5">
{
  layout: "page",
  style: {
    navigationBarTitleText: "资讯详情",
  },
}
</route>

<template>
  <view class="information-detail" v-if="!loading">
    <!-- <view class="user-info">
      <view class="left">
        <image class="img" src="../../static/images/action-user.png" />
        <view class="info">
          <view class="name-content">
            <view class="name">{{ informationObj.authorName }}</view>
            <view class="attentionBtn">+关注</view>
          </view>
          <view class="status-content">
            <view class="icon" v-if="informationObj.location"></view>
            <view class="location">{{ informationObj.location }}</view>
            <view class="time">{{ informationObj.onlineStatus }}</view>
          </view>
        </view>
      </view>
      <view class="right">
        <view class="dot"></view>
        <view class="dot"></view>
        <view class="dot"></view>
      </view>
    </view> -->

    <view class="information-detail-content">
      <view class="flex mb-20rpx">
        <view class="text-32rpx font-bold text-#000 ml-8rpx">
          {{ informationObj.title }}
        </view>
      </view>
      <view class="flex items-center mb-15rpx">
        <view
          class="flex mr-2 items-center bg-#B8F069 rounded-6rpx w-80rpx h-32rpx justify-center"
        >
          <image
            class="h-[19rpx] w-[19rpx]"
            src="/static/images/action-fire.png"
            mode="aspectFill"
          />
          <view class="text-16rpx text-#1b1b1b ml-4rpx">资讯</view>
        </view>
        <view v-if="informationObj.publishTime" class="flex items-center">
          <image
            class="h-[24rpx] w-[24rpx]"
            src="/static/images/action-time.png"
            mode="aspectFill"
          />
          <view class="text-#a6a6a6 text-20rpx ml-10rpx">
            时间：{{ informationObj.publishTime }}
          </view>
        </view>
      </view>
      <view class="content text-16rpx" v-html="informationObj.content"> </view>
      <video
        v-if="informationObj.videoUrl"
        class="w-100%"
        id="myVideo"
        :src="informationObj.videoUrl"
        enable-danmu
        danmu-btn
        controls
      ></video>
      <view class="group-content">
        <view class="group-title">{{ informationObj.groupName }}</view>
        <view class="group-qrcode" v-if="informationObj.qrcodeUrl">
          <canvas
            canvas-id="myQrcode"
            style="width: 300px; height: 300px"
          ></canvas>
        </view>
        <view class="group-hint" v-if="informationObj.qrcodeExpireTime">
          该二维码七天内({{
            informationObj.qrcodeExpireTime
          }})有效，重新进入将更新
        </view>
      </view>

      <view class="comment-content">
        <view class="tagsWrapper">
          <view v-if="informationObj.tags" class="flex m-b-15rpx tagsContent">
            <view
              v-for="(item, index) in informationObj.tags.split(',')"
              :key="index"
              class="flex text-20rpx desc-item"
            >
              <view class="p-l-6rpx p-r-6rpx desc-icon">#</view>
              <view class="m-l-6rpx">{{ item || "口好好地几号放假" }}</view>
            </view>
          </view>
        </view>
        <view class="detail-status">
          <div class="left" @click="likeBtnClick">
            <image
              v-if="likeFlag"
              class="icon"
              src="../../static/images/praise-col.png"
            />
            <image v-else class="icon" src="../../static/images/praise.png" />
            <div class="num">{{ informationObj.likeCount }}人点赞</div>
          </div>
          <div class="right">
            <div class="comment" @click="commentClick">
              <image class="icon" src="../../static/images/comment.png" />
              <div class="num">{{ informationObj.commentCount }}条评论</div>
            </div>
            <!-- <div class="collect">
            <image class="icon" src="../../static/images/collect.png" />
            <div class="num">865收藏</div>
          </div> -->
          </div>
        </view>
        <view class="comment-input">
          <uni-easyinput
            v-model="inptVal"
            style="background: rgba(240, 247, 245, 1)"
            placeholder="既然来了，那就一起来参与讨论吧~"
            @input="input1"
            suffixIcon="paperplane"
            @iconClick="iconClick"
          ></uni-easyinput>
        </view>
      </view>
    </view>
    <wd-popup
      custom-style="padding: 20px 10px; overflow: hidden; height: 400px; border-top-left-radius: 10px; border-top-right-radius: 10px"
      v-model="show"
      position="bottom"
      closable
    >
      <view class="comment-list">
        <view
          class="comment-item"
          v-for="(item, index) in commentList"
          :key="index"
        >
          <image class="avatar" :src="item.avatarUrl" />
          <view class="text">
            <view class="name">{{ item.nickname || "昵称" }}</view>
            <view class="desc">{{ item.content }}</view>
          </view>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<script lang="ts" setup>
import drawQrcode from "weapp-qrcode";
import {
  httpGetInformationDetail,
  httpGetInformationInteractionDetail,
  httpGetInformationInteractionList,
  httpAddNewsLike,
  httpAddComment,
} from "@/service/home";
import { currRoute } from "@/utils";
import { useUserStore } from "@/store";
import { storeToRefs } from "pinia";

const inptVal = ref<String>("");
const loading = ref<Boolean>(false);
const commentList = ref<any>([]);
const show = ref<any>(false);
const likeFlag = ref<Boolean>(false);
const informationObj = ref<any>({
  // id: 0,
  // title: "大梦创新AIGC",
  // content: text,
  // authorId: 1,
  // authorName: "郭荣",
  // authorAvatar: "",
  // location: "北京市",
  // onlineStatus: "1小时前在线",
  // qrcodeUrl: "https://www.baidu.com",
  // qrcodeExpireTime: "2024-03-03 23:59:59",
  // groupName: "大梦创新社群交流",
  // likeCount: 983,
  // commentCount: 123,
  // shareCount: 865,
  // viewCount: 0,
  // publishTime: "9:14",
});

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

const iconClick = async () => {
  if (inptVal.value) {
    try {
      const res = await httpAddComment({
        newsId: informationObj.value.id,
        userId: userInfo.value.account,
        type: 1,
        content: inptVal.value,
      });
      if (res.code === 200) {
        inptVal.value = "";
        getInformationInteractionList(informationObj.value.id);
      }
    } catch (error) {
      console.log(error, "error");
    }
  }
};

const likeBtnClick = async () => {
  try {
    await httpAddNewsLike({
      id: informationObj.value.id,
    });
    likeFlag.value = true;
    informationObj.value.likeCount = informationObj.value.likeCount + 1;
  } catch (error) {
    console.log(error);
  }
};

const getInformationDetail = async (id: any) => {
  try {
    loading.value = true;
    const res = await httpGetInformationDetail({ id });
    if (res.code === 200) {
      informationObj.value = res.data;
      if (informationObj.value.qrcodeUrl) {
        drawQrcode({
          width: 300,
          height: 300,
          canvasId: "myQrcode", // canvas 的 ID
          text: informationObj.value.qrcodeUrl, // 二维码内容
        });
      }
    }
    loading.value = false;
  } catch (error) {
    console.log(error, "error");
    loading.value = false;
  }
};

const getInformationInteractionList = async (id: any) => {
  try {
    const res = await httpGetInformationInteractionList({
      size: 10000,
      current: 1,
      newsId: id,
      type: 1,
    });
    if (res.code === 200) {
      commentList.value = res.data.records;
      informationObj.value.commentCount = res.data.total;
    }
  } catch (error) {
    console.log(error, "error");
  }
};

onMounted(() => {
  const pathObj = currRoute();
  const { id } = pathObj.query;
  if (id) {
    getInformationDetail(id);
    getInformationInteractionList(id);
  }
});

const commentClick = () => {
  show.value = true;
};
</script>

<style lang="scss">
.information-detail {
  padding: 0 0 200rpx;

  .information-detail-content {
    padding: 0 35rpx;
  }

  .user-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24rpx;
    .left {
      display: flex;
      align-items: center;
      .img {
        width: 96rpx;
        height: 96rpx;
        border-radius: 50%;
      }

      .info {
        margin-left: 12rpx;
        .name-content {
          display: flex;
          align-items: center;
          .name {
            font-size: 32rpx;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
          }

          .attentionBtn {
            font-size: 20rpx;
            font-weight: bold;
            color: rgba(26, 26, 26, 1);
            padding: 8rpx 10rpx;
            border-radius: 226rpx;
            background: rgba(200, 255, 122, 1);
            border: 1rpx solid rgba(26, 26, 26, 1);
            margin-left: 20rpx;
          }
        }

        .status-content {
          display: flex;
          align-items: center;

          .icon {
            width: 20rpx;
            height: 24rpx;
            opacity: 1;
            background: rgba(26, 26, 26, 1);
          }

          .location {
            font-size: 24rpx;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
            margin-left: 10rpx;
          }

          .time {
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            margin-left: 24rpx;
          }
        }
      }
    }

    .right {
      display: flex;
      align-items: center;
      justify-content: center;
      .dot {
        width: 8rpx;
        height: 8rpx;
        opacity: 1;
        background: rgba(26, 26, 26, 1);
        margin-right: 8rpx;
        border-radius: 50%;
      }

      .dot:last-child {
        margin-right: 0;
      }
    }
  }

  .title {
    font-size: 32rpx;
    font-weight: 400;
    line-height: 42.43rpx;
    color: rgba(0, 0, 0, 1);
    margin-bottom: 54rpx;
  }

  .content {
    font-size: 32rpx;
    font-weight: 400;
    line-height: 42.43rpx;
    color: rgba(27, 27, 27, 1);
    margin-bottom: 25rpx;
  }

  .group-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    .group-title {
      font-size: 32rpx;
      font-weight: bold;
      color: rgba(27, 27, 27, 1);
      margin-bottom: 40rpx;
    }

    .group-qrcode {
      margin-bottom: 20rpx;

      .qrcode-img {
        width: 360rpx;
        height: 360rpx;
      }
    }

    .group-hint {
      font-size: 20rpx;
      color: #a6a6a6;
    }
  }

  .comment-content {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    padding: 27rpx 0 36rpx;

    .tagsWrapper {
      padding: 0 35rpx;

      .tagsContent {
        display: flex;
        overflow-x: auto;
        width: 100%;
        white-space: nowrap; /* 防止内容换行 */
        -webkit-overflow-scrolling: touch; /* 提升在移动设备上的滚动性能 */

        .desc-item {
          flex: 0 0 auto; /* 防止子元素伸缩 */
          margin-right: 10px; /* 项目之间的间距 */
          background-color: #f0f0f0;
          text-align: center;
          opacity: 1;
          border-radius: 210rpx;
          background: rgba(235, 247, 244, 1);
          padding: 10rpx 16rpx;
          margin-right: 24rpx;
          .desc-icon {
            border-radius: 4rpx;
            background: rgba(27, 27, 27, 1);
            color: #fff;
          }
        }
      }
      .tagsContent::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera: 隐藏滚动条 */
      }
    }

    .detail-status {
      padding: 0 35rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 26rpx;

      .left {
        display: flex;
        align-items: center;
        .icon {
          width: 32rpx;
          height: 32rpx;
        }

        .num {
          margin-left: 12rpx;
          font-size: 24rpx;
          font-weight: bold;
          color: rgba(166, 166, 166, 1);
          text-align: left;
          vertical-align: top;
        }
      }

      .right {
        display: flex;

        .comment,
        .collect {
          display: flex;
          align-items: center;
          // margin-right: 40rpx;
          .icon {
            width: 32rpx;
            height: 32rpx;
          }

          .num {
            margin-left: 12rpx;
            font-size: 24rpx;
            font-weight: bold;
            color: rgba(166, 166, 166, 1);
          }
        }

        .collect {
          margin-right: 0;
        }
      }
    }

    .comment-input {
      padding: 0 35rpx;
      :deep(.is-input-border) {
        opacity: 1;
        border: none;
        border-radius: 220rpx;
        background: rgba(240, 247, 245, 1) !important;
      }

      :deep(.uni-easyinput__content) {
        border-radius: 220rpx;
        background: rgba(240, 247, 245, 1);
      }

      :deep(.uni-easyinput__content-input) {
        border-radius: 220rpx;
        background: rgba(240, 247, 245, 1);
      }
    }
  }

  .comment-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera: 隐藏滚动条 */
  }

  .comment-list {
    padding: 0 35rpx;
    overflow: auto;
    height: 760rpx;
    margin-top: 40rpx;
    .comment-item {
      display: flex;
      margin-bottom: 40rpx;

      .avatar {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
      }
      .text {
        margin-left: 10rpx;
        max-width: 590rpx;
        .name {
          font-size: 24rpx;
          font-weight: 400;
          color: #333;
        }
        .desc {
          word-break: break-all;
          font-size: 24rpx;
          font-weight: 400;
        }
      }
    }
  }
}
</style>
